<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->


<dom-module id="shop-plugin">
    <template>
        <app-route
        route="{{route}}"
        pattern="/:pluginContext"
        data="{{routeData}}"></app-route>
        <plugin-content-view visible="{{visible}}" contents="{{layout.plugin_top}}" width="[[pageWidth]]"></plugin-content-view>
        <div id="content"></div>
        <plugin-content-view visible="{{visible}}" contents="{{layout.plugin_bottom}}" width="[[pageWidth]]"></plugin-content-view>
    </template>

    <script>
        class ShopPlugin extends PluginElement {
            static get observers(){
                return ["_routeChnaged(route)"];
            }
            static get is() {
                return 'shop-plugin';
            }

            static get properties() {
                return {
                    page:String,
                    visible: {
                        type: Boolean,
                        observer: '_visibleChanged'
                    },
                    currentPage:Object
                }
            }
            ready(){
                super.ready();
            }
            _routeChnaged(route){
                if(app.route.path.startsWith(this.rootPath+"plugin/")){
                    let path = app.httpHost+this.route.path;
                    let pathArr = path.split("/");
                    let pageName = pathArr[pathArr.length-1].split(".")[0];
                    if(this.currentPage){
                        this.currentPage.visible = false;
                        this.$.content.removeChild(this.currentPage); 
                    }
                    let context = {
                        rootPath:app.httpHost+app.rootPath,
                        pluginPath:app.httpHost+"/"+this.routeData.pluginContext+"/",
                        httpHost:app.httpHost,
                        proxyPath:app.httpHost+app.rootPath+"plugin/"+this.routeData.pluginContext+"/",
                        appId:app.appId,
                        websocket:app.$.websocket,
                        accountId:app.account.result.id,
                        token:app.token,
                        route:path=>{
                            app._page(path);
                        }
                    };
                    if(path.endsWith(".js")){
                        let script = document.createElement("script");
                        script.src = moduleUrl;
                        script.type="module";
                        script.charset="utf-8";
                        this.shadowRoot.appendChild(script);
                    }else{
                        Polymer.importHref(path,e=>{
                            if(!window.customElements.get(pageName)){
                                let iframe = document.createElement("iframe");
                                iframe.src = path;
                                iframe.style.border = "none";
                                iframe.style.width = "100%";
                                
                                this.$.content.appendChild(iframe);
                                this.currentPage =iframe;
                                iframe.contentWindow.context = context;
                                iframe.addEventListener("load",function(){
                                    iframe.style.height = iframe.contentDocument.firstElementChild.offsetHeight+"px";
                                });
                                
                            }
                        });
                    }
                    let page = document.createElement(pageName);
                    page.setAttribute("name",pageName);
                    page.context = context;
                    this.$.content.appendChild(page);
                    this.currentPage =page;
                    this.currentPage.visible = true;
                }
            }
            _visibleChanged(visible) {
                if(visible){
                }
                if(this.currentPage){
                    this.currentPage.visible = visible;
                }
                
            }
        }

        customElements.define(ShopPlugin.is, ShopPlugin);

    </script>

</dom-module>
